<template>
  <el-row>
    <el-col :span="16" :offset="4">
  <el-form  ref="form" :model="movieInfo" :rules="rules" label-position="right" label-width="100px">
    <el-form-item label="电影名称" prop="name">
      <el-input v-model="movieInfo.name"></el-input>
    </el-form-item >
    <el-form-item label="翻译名" prop="translationName">
      <el-input v-model="movieInfo.translationName">
      </el-input>
    </el-form-item>
    <el-form-item label="电影介绍" prop="introduction"  >
      <el-input type="textarea" v-model="movieInfo.introduction" :rows="2" maxlength="50" show-word-limit placeholder="请输入电影介绍"></el-input>
    </el-form-item>
    <el-form-item label="发布日期" prop="releaseDate" >
      <el-date-picker
        v-model="movieInfo.releaseDate" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="选择导演" prop="director">
        <el-select v-model="movieInfo.director" placeholder="请选择">
          <el-option v-for="index in movieList.director" :key="index.actorId" :label="index.actorName" :value="index.actorId"> </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="选择演员" prop="actors">
      <el-select v-model="movieInfo.actors" placeholder="请选择" multiple clearable>
        <el-option v-for="item in movieList.actor" :key="item.actorId" :label="item.actorName" :value="item.actorId"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="电影分类" prop="types">
      <el-select v-model="movieInfo.types" placeholder="请选择" multiple clearable>
        <el-option v-for="ti in movieList.movieType" :key="ti.typeId" :label="ti.typeName" :value="ti.typeId"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="电影状态" prop="movieStatus">
      <el-select v-model="movieInfo.movieStatus" placeholder="请选择">
        <el-option v-for="item in movieList.status" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="电影图片" prop="images">
      <el-upload
        :action="uploadPath"
        list-type="picture-card" :headers="uploadHeader" :file-list="fileList" :before-upload="beforeUpload" :on-success="uploadSuccess" ref="pictureUpload">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" height="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button type="warning" @click="onReset">返回</el-button>
    </el-form-item>
  </el-form>
    </el-col>
  </el-row>
</template>

<script>
const initMovie = {
  movieId: '',
  name: '',
  translationName: '',
  introduction: '',
  releaseDate: '',
  director: '',
  movieStatus: 1,
  types: [],
  actors: [],
  images: []
}

export default {
  name: 'FilmEdit',
  data () {
    return {
      fileList: [],
      fileInfo: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      uploadHeader: {
        token: ''
      },
      uploadPath: process.env.VUE_APP_BASE_API + '/upload',
      movieInfo: { ...initMovie },
      props: { multiple: true },
      movieList: {
        movieType: [],
        actor: [],
        director: [],
        status: [{
          value: 1,
          label: '正在上映'
        },
        {
          value: 2,
          label: '已上映'
        },
        {
          value: 3,
          label: '未上映'
        }]
      },
      imageUrl: '',
      rules: {
        name: [{ required: true, message: '请输入电影名称', trigger: 'blur' }],
        introduction: [{ required: true, message: '请输入电影介绍', trigger: 'blur' }],
        types: [{ required: true, message: '请选择电影类型', trigger: 'change' }],
        director: [{ required: true, message: '请选择导演', trigger: 'change' }],
        actors: [{ required: true, message: '请选择演员', trigger: 'change' }],
        images: [{ required: true, message: '请选择图片', trigger: 'change' }],
        movieStatus: [{ required: true, message: '请选择电影状态', trigger: 'change' }],
        releaseDate: [{ required: true, message: '请选择发布日期', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleRemove (file) {
      this.$confirm('您确定要移除吗?', '询问').then(() => {
        this.$refs.pictureUpload.handleRemove(file)
      }).then(() => {
        for (let i = 0; i < this.fileInfo.length; i++) {
          if (file.name === this.fileInfo[i]) {
            this.fileInfo.splice(i, 1)
          }
        }
      })
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isImage) {
        this.$message.error('文件格式不正确')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2M')
      }
      return isImage && isLt2M
    },
    uploadSuccess (data) {
      if (data.code === 200) {
        this.fileInfo.push(data.data)
        this.fileList = this.fileInfo.map(item => {
          return {
            name: item,
            url: `${process.env.VUE_APP_BASE_API}/img/${item}`
          }
        })
      }
    },
    onSubmit () {
      this.movieInfo.images = this.fileInfo
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.fileInfo)
          this.$axios.post('sys/movie/update', this.movieInfo).then(({ data }) => {
            if (data.code === 200) {
              this.$alert('保存成功').then(() => {
                this.onReset()
                this.$router.push('FilmInfo')
              })
            }
          })
        } else {
          this.$alert('表单填写不完整')
        }
      })
    },
    onReset () {
      this.movieInfo = { ...initMovie }
      this.$refs.pictureUpload.clearFiles()
      this.$router.push('/FilmInfo')
    },
    getActorList () {
      this.$http.get('sys/actor/select').then(({ data }) => {
        if (data.code === 200) {
          this.movieList.actor = data.data.list
          this.movieList.director = data.data.list
        } else {
          this.$confirm(data.msg)
        }
      })
      this.$http.get('sys/type/movie/select').then(({ data }) => {
        if (data.code === 200) {
          this.movieList.movieType = data.data.list
        } else {
          this.$confirm(data.msg)
        }
      })
    },
    init () {
      if (this.$route.query.movieId) {
        this.$http.get('/sys/movie/info/' + this.$route.query.movieId).then(({ data }) => {
          if (data.code === 200) {
            const movieList = data.data.movie
            const actor = data.data.actorList
            const actorId = []
            const type = data.data.typeList
            const typeId = []
            const image = data.data.imageList
            for (let i = 0; i < actor.length; i++) {
              if (actor[i].status === 1) { actorId.push(actor[i].actorId) }
            }
            for (let i = 0; i < type.length; i++) {
              typeId.push(type[i].typeId)
            }
            this.fileList = image.map(item => {
              return {
                name: item.imageSrc,
                url: `${process.env.VUE_APP_BASE_API}/img/${item.imageSrc}`
              }
            })
            for (let i = 0; i < this.fileList.length; i++) {
              this.fileInfo.push(this.fileList[i].name)
            }
            this.movieInfo = {
              movieId: movieList.movieId,
              name: movieList.name,
              translationName: movieList.translationName,
              introduction: movieList.introduction,
              releaseDate: movieList.releaseDate,
              director: movieList.director,
              movieStatus: movieList.movieStatus,
              actors: actorId,
              types: typeId,
              images: image
            }
          } else {
            this.$confirm(data.msg)
          }
        })
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.getActorList()
      this.init()
      this.uploadHeader.token = this.$cookies.get('token')
    })
  }
}

</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
